<!--
 * @Descripttion: 虚拟表格
 * @version: 
 * @Author: 淏
 * @Date: 2023-11-24 16:23:05
 * @LastEditors: 淏
 * @LastEditTime: 2024-04-30 16:38:19
-->
<template>
  <div class="ms-table">
    <p style="margin: 5px 0">
      <span class="border-green">
        <div class="totalNum">
          已获取
          <strong total="368082">{{ tableData.length }}</strong>
          <span>条数据</span>
        </div>
      </span>
    </p>
    <u-table
      ref="plTable"
      :data="tableData"
      :height="tableHeight"
      use-virtual
      showBodyOverflow="title"
      showHeaderOverflow="title"
      :row-height="rowHeight"
      border
      size="mini"
      :cell-style="columnBackgroundStyle"
      @row-click="singleElection"
    >
      <!--     @selection-change="handleSelectionChange"
      :row-class-name="rowClassName" -->

      <u-table-column width="55" align="center" fixed>
        <template slot-scope="scope">
          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
          <el-radio
            class="radio"
            v-model="rowIndex"
            :label="scope.$index"
            @click="singleElection"
          >
            {{ none }}
          </el-radio>
        </template>
      </u-table-column>
      <u-table-column type="index" width="50" align="center" fixed />
      <u-table-column
        align="center"
        sortable
        v-for="item in columns"
        :key="item.id"
        :show-overflow-tooltip="true"
        :prop="item.columnEnName"
        :label="item.columnCnName"
        min-width="120"
      />
      <u-table-column
        v-if="handleBts.length > 0"
        fixed="right"
        label="操作"
        :width="columnWidth"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            v-for="(item, index) in handleBts"
            :type="item.btType"
            :key="index"
            size="mini"
            plain
            v-waves
            class="vButton"
            @click.native.stop="handleMenuClick(item.funName, scope.row)"
          >
            {{ item.btName }}
          </el-button>
        </template>
      </u-table-column>
    </u-table>
  </div>
</template>

<script>
  export default {
    // 组件名称
    name: 'virtuallyTable',
    // 组件参数 接收来自父组件的数据
    props: {
      tableData: {
        type: Array,
        required: true,
      },
      columns: {
        type: Array,
        required: true,
      },
      handleBts: {
        type: Array,
        default: function () {
          let handleBt = []
          return handleBt
        },
      },
      columnWidth: {
        type: Number,
        default: 240,
      },
      tableHeight: {
        type: Number,
        default: function () {
          let height = window.innerHeight
          height = height - 230
          console.log('height')
          console.log(height)
          return height
        },
      },
    },
    // 局部注册的组件
    components: {},
    // 组件状态值
    data() {
      return {
        rowHeight: 55,
        diaTabHeight: 200,
        total: this.tableData.length,
        //显示为空
        none: '',
        rowIndex: '',
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {
      tableData(value) {
        this.total = value.length
      },
    },
    // 组件方法
    methods: {
      handleMenuClick(type, row) {
        this.$emit('getTableBtn', type, row)
      },

      columnBackgroundStyle(obj) {
        if (obj.columnIndex == 0) {
          return 'background-color:yellow;'
        }
      },
      //获取当前的行数
      /*  rowClassName({ row, rowIndex }) {
        //把每一行的索引放进row
        row.index = rowIndex
      }, */
      // 表格单勾选
      singleElection(row) {
        let headerIndex = ''
        this.tableData.forEach((item, index) => {
          if (item === row) {
            headerIndex = index
            return
          }
        })
        this.$emit('getTableSel', headerIndex)
      },
    },
    created() {},
    mounted() {},
  }
</script>

<style scoped>
  /*  .waves-effect {
    display: block;
  } */
</style>
<style lang="less" scoped>
  .ms-table {
    border-radius: 5px;
    background: rgba(48, 89, 224, 0.3);
    overflow: hidden;
  }
  /*最外层透明*/
  .ms-table /deep/ .el-table,
  .ms-table /deep/ .el-table__expanded-cell {
    background-color: transparent;
    color: white;
  }
  /* 表格内背景颜色 */
  .ms-table /deep/ .el-table th,
  .ms-table /deep/ .el-table tr,
  .ms-table /deep/ .el-table td {
    background-color: transparent !important;
    //表格字体颜色
    color: rgb(255, 255, 255);
  } /* 表格表头字体颜色 */
  /deep/ .el-table thead {
    color: #00ffff;
    font-weight: 500;
  }
  // 分页样式改造
  /deep/ .el-pagination.is-background .btn-prev {
    background: transparent;
    border-radius: 2px;
    border: 1px solid #207be0;
    color: #fff;
  }
  /deep/ .el-pagination.is-background .btn-next {
    background: transparent;
    border-radius: 2px;
    border: 1px solid #207be0;
    color: #fff;
  }
  /deep/ .el-pagination.is-background .el-pager li {
    background: transparent;
    border-radius: 2px;
    border: 1px solid #207be0;
    color: #fff;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #207be0;
  }
  /deep/ .el-pagination__editor.el-input .el-input__inner {
    background: transparent;
    border: 1px solid #207be0;
    color: #fff;
  }
  /deep/ .el-pagination__total,
  /deep/ .el-pagination__jump {
    color: #fff;
  }
  /deep/ .el-table__fixed-header-wrapper {
    background: #207be0;
  }
  /deep/ .el-table--fixed__virtual-wrapper {
    background: #207be0;
  }
  .vButton {
    background: rgba(0, 242, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #207be0;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
</style>
<style>
  .totalNum {
    color: #00ffff;
    font-family: 'tapeworm';
  }
  .totalNum strong {
    font-size: 24px;
    margin-right: 10px;
    margin-left: 10px;
  }
  .border-green {
    margin-left: 10px;
    display: block;
    height: 20px;
    line-height: 20px;
    border-left: 5px solid transparent;
    padding-left: 8px;
    border-color: #00ffff !important;
  }
</style>
